<% @page_title = "Enter your email" %>

<div class="panel panel--centered flex flex-column gap-half">
  <h1 class="txt-x-large font-weight-black margin-block-end">Get into Fizzy</h1>

  <%= form_with url: session_path, class: "flex flex-column gap-half txt-medium" do |form| %>
    <div class="flex align-center gap">
      <label class="flex align-center gap input input--actor">
        <%= form.email_field :email_address, required: true, class: "input txt-large full-width", autofocus: true, autocomplete: "username", placeholder: "Enter your email address…" %>
      </label>
    </div>

    <p><strong>New here?</strong> <%= link_to "Sign up", new_signup_path %> to create an account. <strong>Already have an account?</strong> Enter your email and we’ll get you signed in.</p>

    <button type="submit" id="log_in" class="btn btn--link center txt-medium">
      <span>Let’s go</span>
      <%= icon_tag "arrow-right" %>
    </button>
  <% end %>
</div>

<% content_for :footer do %>
  <%= render "sessions/footer" %>
<% end %>
